<template>
  <div class="edit">
    <nav-top title="编辑资料" />
    <div class="avatar-wrapper">
      <van-uploader v-if="userInfo.nickname" :after-read="uploadAvatar">
        <img
          v-if="userInfo.head_img"
          :src="$axios.defaults.baseURL + userInfo.head_img"
          alt
          class="avatar"
        />
        <img v-else src="@/assets/logo.png" alt class="avatar" />
      </van-uploader>
    </div>
    <personal-cell tag="昵称" :desc="userInfo.nickname" @click="editNickname" />
    <personal-cell tag="密码" desc="******" @click="editPassword" />
    <personal-cell
      tag="性别"
      :desc="userInfo.gender === 0 ? '女' : '男'"
      @click="showGender = true"
    />
    <van-dialog
      v-model="showNicknameDialog"
      title="修改昵称"
      show-cancel-button
      @confirm="setNickname"
      @cancel="newNickname = ''"
    >
      <van-field
        ref="nicknameInput"
        v-model="newNickname"
        placeholder="请输入新的昵称"
      />
    </van-dialog>
    <van-dialog
      v-model="showPasswordDialog"
      title="修改密码"
      show-cancel-button
      @confirm="setPassword"
      @cancel="newPassword = ''"
    >
      <van-field
        ref="passwordInput"
        v-model="newPassword"
        placeholder="请输入新的密码"
      />
    </van-dialog>
    <van-action-sheet
      v-model="showGender"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="showGender = false"
      @select="setGender"
    />
  </div>
</template>

<script>
import NavTop from "../../components/NavTop";
import PersonalCell from "../../components/PersonalCell";
export default {
  name: "Edit",
  components: {
    NavTop,
    PersonalCell,
  },

  data() {
    return {
      userInfo: {},
      showNicknameDialog: false,
      showPasswordDialog: false,
      showGender: false,
      newNickname: "",
      newPassword: "",
      actions: [
        {
          name: "男",
          genderNum: 1,
        },
        {
          name: "女",
          genderNum: 0,
        },
      ],
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      const userId = window.localStorage.getItem("userId");
      this.$axios.get("/user/" + userId).then((res) => {
        const data = res.data;
        if (data.message === "获取成功") {
          this.userInfo = data.data;
        }
      });
    },
    setNickname() {
      if (!this.newNickname) {
        this.$toast.fail("昵称不能为空");
        return;
      }
      this.setProfile({ nickname: this.newNickname });
      this.newNickname = "";
    },
    editNickname() {
      this.showNicknameDialog = true;
      this.$nextTick(() => {
        this.$refs.nicknameInput.focus();
      });
    },
    editPassword() {
      this.showPasswordDialog = true;
      this.$nextTick(() => {
        this.$refs.passwordInput.focus();
      });
    },
    setPassword() {
      if (!this.newNickname) {
        this.$toast.fail("密码不能为空");
        return;
      }
      this.setProfile({ password: this.newPassword });
      this.newPassword = "";
    },
    setGender(gender) {
      this.setProfile({ gender: gender.genderNum });
    },
    // 封装通用设置资料函数
    setProfile(data) {
      const userId = window.localStorage.getItem("userId");
      this.$axios({
        method: "post",
        url: "/user_update/" + userId,
        data,
      }).then((res) => {
        // console.log(res);
        for (let key in data) {
          this.userInfo[key] = data[key];
        }
      });
    },
    uploadAvatar(fileObj) {
      let data = new FormData();
      data.append("file", fileObj.file);
      this.$axios({
        method: "post",
        url: "/upload",
        data,
      }).then((res) => {
        console.log(res);
        if (res.data.message === "文件上传成功") {
          this.setProfile({
            head_img: this.$axios.defaults.baseURL + res.data.data.url,
          });
        } else {
          this.$toast.fail(res.data.message);
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.avatar-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 160/360 * 100vw;
  .avatar {
    width: 70/360 * 100vw;
    height: 70/360 * 100vw;
    border-radius: 50%;
    object-fit: cover;
  }
}
</style>
